<style scoped>

.extendGroup {
  float: right;
  margin-right: 20px;
  opacity: 0;
}

.el-tree-node__content:hover .extendGroup {
  opacity: 1;
}

</style>

<template>
  <div v-loading="loading">
    <!-- 操作 -->
   <div class="group_title">
     关联用户
   </div>
    <div class="operation">
<!--       <el-button size="small" type="primary" v-has="[role.request]" @click="fetchData">查询</el-button>
      <el-button size="small" type="danger" v-has="[role.remove]">删除</el-button>
      <el-button size="small" v-if="$_has([role.request]) && canReset">重置</el-button>
      <el-button size="small" type="info" @click="requestNotAllowed">尝试发起越权请求</el-button> -->

    </div>
    <!-- table start  -->
    <el-table ref="multipleTable" :data="list" border style="width: 100%;"  @selection-change="selsChange" >
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="loginName"  label="账号">
      </el-table-column>
      <el-table-column prop="userName"  label="姓名">
      </el-table-column>
      <el-table-column prop="certNo"  label="身份证号">
      </el-table-column>
      <el-table-column prop="userMail" label="邮箱">
      </el-table-column>
      <el-table-column prop="phoneNum" label="电话">      
      </el-table-column>

     
    </el-table>
    <!-- table end  -->
    <!--工具条-->
    <el-col :span="24" class="toolbar toolbar_footer">
      <el-button type="primary" v-if="isReleUser" @click="batchRemove" :disabled="this.sels.length===0">保存</el-button>
      <!-- <el-pagination v-if="total" layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" :page-size="showCount" :total="total" style="float:right;">
      </el-pagination> -->
    </el-col>
  </div>
</template>

<script>
import * as users from '../api/users';


let myMixin = {
  data: function() {
    return { users }
  }
}

export default {
  mixins: [myMixin],
  data() {
    return {
      isReleUser:true,
      filters:{name:''},//搜索表单
     
      sels: [],//列表选中列

      list: [],
      roleIdSelect:[],
      roleArr:[],
      canReset: true,
      loading: false,
      roleId:'',
      groupId:''
    }
  },
  methods: {
    checked(index){
      //首先el-table添加ref="table"引用标识
      this.$refs.multipleTable.toggleRowSelection(this.list[index],true);
    },
   selectCheck(){
      let index=0;

      if(this.roleIdSelect!=undefined&&this.roleIdSelect!="undefined"&&this.roleIdSelect!=''){

         this.roleIdSelect.map(x=>{

           for(var i=0;i<this.roleArr.length;i++){
             if(this.roleArr[i]==x){
               this.checked(i);//每次更新了数据，触发这个函数即可。
             }
           }

         })
      }   

    },
    selsChange: function (sels) {//多选框
      this.sels = sels;
    },
    batchRemove: function () {//批量保存
      var ids = this.sels.map(item => item.userId).toString();
      let para={};
      if(this.roleId!=undefined&&this.roleId!="undefined"&&this.roleId!=""){
          para = {
            roleId:this.roleId,
            userIdList:ids
          };
          // console.log(qs.stringify(para));
          // return;
          users.releUser.r(para).then((res) => {
            if(res.data.retCode==1){
              //关联组成功
              this.addFormVisible = false;
              this.$message("关联用户成功");
              // this.$parent.routerPath="users";
              this.$parent.fetchData();

              this.$router.push(this.$parent.$route.matched[2].path);
              // this.$parent.$route.path
              // this.fetchData();
            }else{
              this.$message(res.data.retMsg);
            }
            
          });
      }else if(this.groupId!=undefined&&this.groupId!="undefined"&&this.groupId!=""){
          para = {
            groupId:this.groupId,
            userIdList:ids
          };
          // console.log(qs.stringify(para));
          // return;
          users.releUserGroup.r(para).then((res) => {
            if(res.data.retCode==1){
              //关联组成功
              this.addFormVisible = false;
              this.$message("关联用户成功");
              // this.$parent.routerPath="users";
              this.$parent.fetchData();

              this.$router.push(this.$parent.$route.matched[2].path);
              // this.$parent.$route.path
              // this.fetchData();
            }else{
              this.$message(res.data.retMsg);
            }
            
          });
      }
    
    },
    getUsers(){
      //获取用户列表数据
    },
 
    fetchData(init) {
       this.loading = true;
   
      users.requestList.r().then((res) => {
        if(res.data.retCode==1){
          this.total=res.data.data.totalRow;
          this.list = res.data.data;
          this.list.map(x=>{
              this.roleArr.push(x.userId);            
            })
          this.fetchDataList();       

        }else{
          this.$message(res.data.retMsg);

        }
        this.loading = false;
      });
    },
     fetchDataList() {
      let para = {
          roleId:this.roleId,
          groupId:this.groupId
        };
      users.requestList.r(para).then((res) => {
        if(res.data.retCode==1){
          res.data.data.map(x=>{
            this.roleIdSelect.push(x.userId);
          })
        this.selectCheck();

        }else{
          this.$message(res.data.retMsg);

        }
       

        this.loading = false;
      })
    },
    requestNotAllowed: function(){
      users.notAllowed.r();
    }
  },
  created() {
    this.roleId=this.$route.query.id;
    this.groupId=this.$route.query.groupId;
    if(this.groupId!=undefined && this.groupId!="undefined" && this.groupId!=""){
        this.isReleUser=this.$_has([users.releUserGroup]);

    }else if(this.roleId!=undefined && this.roleId!="undefined" && this.roleId!=""){
       this.isReleUser=this.$_has([users.releUser]);
    }
    this.fetchData(true)
  }
}
</script>